<template>
  <view class="box">
    <uni-forms ref="formRef" :model-value="formData" :rules="rules">
      <uni-forms-item name="mobile">
        <uni-easyinput v-model="formData.mobile" placeholder="请输入手机号码"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="password">
        <uni-easyinput v-model="formData.password" type="password" placeholder="请输入密码"
          :clearable="false"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="intro">
        <uni-easyinput v-model="formData.intro" type="textarea" placeholder="请输入自我介绍" :clearable="false" />
      </uni-forms-item>
      <button type="primary" @click="onSubmit">提交</button>
    </uni-forms>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  // 0. 定义属性用于获取表单
  const formRef = ref()

  // 1. 定义数据对象
  const formData = ref({
    mobile: '',
    password: '',
    intro: ''
  })

  // 2. 定义校验规则对象
  const rules = {
    // 2.1 手机号
    mobile: {
      rules: [
        { required: true, errorMessage: '手机号不能为空' },
        { pattern: '^[1][3-9][0-9]{9}$', errorMessage: '请输入正确的手机号码' }
      ]
    },
    // 2.2 密码
    password: {
      rules: [
        { required: true, errorMessage: '密码不能为空' },
        // a-zA-Z0-9 8-16
        { pattern: '^[a-zA-Z0-9]{8}$', errorMessage: '请输入8位密码' }
      ]
    },
    // 2.3 自我介绍
    intro: {
      rules: [
        { required: true, errorMessage: '自我介绍不能为空' }
      ]
    }
  }

  // 3. 提交表单
  const onSubmit = async () => {
    try {
      const res = await formRef.value.validate()
      console.log(res);
    } catch (e) {
      console.log(e);
    }
  }
</script>

<style lang="scss">
  .box {
    padding: 20px;
  }
</style>